<template>
  <el-radio-group v-model="_value" :disabled="disabled" class="hui-radio-color">
    <el-radio v-for="item in wxColors" :key="item" :label="item">
      <span class="hui-radio-color__label" :class="'hui-' + item">
        {{ item }}
      </span>
    </el-radio>
  </el-radio-group>
</template>

<script>
/**
 * h-radio-color
 * @module common/h-radio-color
 * @desc 选微信卡券的颜色(单选)
 *
 * @param { string } value - 已选的卡券颜色，:value.sync绑定
 * @param { boolean } disabled - 禁用
 */
export default {
  name: 'h-radio-color',
  componentName: 'h-radio-color',
  props: {
    value: String,
    disabled: Boolean
  },
  computed: {
    _value: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('update:value', val)
        this.$emit('change', val)
      }
    }
  },
  data () {
    return {
      wxColors: [
        'Color010',
        'Color020',
        'Color030',
        'Color040',
        'Color050',
        'Color060',
        'Color070',
        'Color080',
        'Color081',
        'Color082',
        'Color090',
        'Color100',
        'Color101',
        'Color102'
      ]
    }
  },
  methods: {},
  created () {}
}
</script>

<style lang="less">
@import '../h-theme/_variable.less';
.hui-radio-color {
  font-family: tahoma;

  .el-radio {
    margin: 0 20px 10px 0;
    line-height: 40px;
  }

  .hui-radio-color__label {
    padding: 10px;
    border-radius: @--border-radius-base;
    color: @--color-white;
    box-shadow: @--box-shadow-light;
  }
}

.hui-Color010 {
  background-color: #63b359;
}

.hui-Color020 {
  background-color: #2c9f67;
}

.hui-Color030 {
  background-color: #509fc9;
}

.hui-Color040 {
  background-color: #5885cf;
}

.hui-Color050 {
  background-color: #9062c0;
}

.hui-Color060 {
  background-color: #d09a45;
}

.hui-Color070 {
  background-color: #e4b138;
}

.hui-Color080 {
  background-color: #ee903c;
}

.hui-Color081 {
  background-color: #f08500;
}

.hui-Color082 {
  background-color: #a9d92d;
}

.hui-Color090 {
  background-color: #dd6549;
}

.hui-Color100 {
  background-color: #cc463d;
}

.hui-Color101 {
  background-color: #cf3e36;
}

.hui-Color102 {
  background-color: #5E6671;
}
</style>
